<script setup>
import { onMounted, ref, computed } from 'vue'
import lineData from './json/data.json'
import milestoneData from './json/lichengbei.json'
import projectNode from './json/kerser.json'
import { 
  handleDataProcessing, 
  generateFormattedData,
  getNodesInMonth,
  positionNode
} from './utils/index.js'
import BaseGanttBox from './components/base-gantt-boxs.vue'
import dayjs from 'dayjs'

const taskDataList = ref([]) // 行军图任务列表
const milestoneList = ref([]) // 里程碑列表
const projectNodeList = ref([]) // 时间线节点数据
const listData = ref({})  // 处理后的数据
const formattedData = ref([]) // 时间轴数据
const labelWidth = ref(200) // 单元格的宽度


// 获取当前月份并计算 activeStep
const activeStep = computed(() => {
  const currentMonth = dayjs().format('MM') + '月' // 当前月份，格式化为 "MM月"
  const index = formattedData.value.findIndex(item => item.month === currentMonth)
  return index !== -1 ? (index + 1) : 0 // 如果找不到当前月份，默认返回 0
})

const scrollbarRef = ref(null)
onMounted(async () => {
  taskDataList.value = lineData
  milestoneList.value = milestoneData
  projectNodeList.value = projectNode

  listData.value = await handleDataProcessing(taskDataList.value, milestoneList.value, projectNodeList.value)
  formattedData.value = generateFormattedData(listData.value.startTime, listData.value.endTime)

  const scrollWrapper = scrollbarRef.value?.$el.querySelector('.el-scrollbar__wrap')
  if (scrollWrapper) {
    scrollWrapper.addEventListener('scroll', handleScroll)
  }
})

// 处理滚动事件
const handleScroll = (event) => {
  const scrollLeft = event.target.scrollLeft
  const timeLineInfoEl = document.querySelector('.milestone-data')
  if (timeLineInfoEl) {
    timeLineInfoEl.style.left = `${-scrollLeft}px`
  }
}
</script>

<template>
  <div class="gantt-box">
    <div class="box-header">XXX项目行军图-甘特图(项目计划与进度)</div>
    <div class="box-container">
      <div class="container-describe">
        <ul class="describe-list">
          <li class="describe-item">
            <div class="item-icon icon-completed"></div>
            <span class="item-text">已完成</span>
          </li>
          <li class="describe-item">
            <div class="item-icon icon-progress"></div>
            <span class="item-text">进行中</span>
          </li>
          <li class="describe-item">
            <div class="item-icon icon-started"></div>
            <span class="item-text">未开始</span>
          </li>
          <li class="describe-item">
            <div class="item-icon">
              <img src="./assets/warning.svg" alt="">
            </div>
            <span class="item-text">风险</span>
          </li>
          <li class="describe-item">
            <div class="item-icon icon-extension"></div>
            <span class="item-text">延期</span>
          </li>
        </ul>
      </div>

      <div class="container-info">
        <div class="info-milestone">
          <div class="milestone-time">
            <div class="line-title-header">关键里程碑</div>
            <div class="line-title-time">项目时间线</div>
          </div>
          <div class="milestone-data">
            <div v-for="(ganttMilestone, index) in listData.milestoneList" :key="index" class="milestone-box">
              <div v-for="(time, index) in formattedData" :key="index" class="milestone-item">
                <base-gantt-box
                    :time="time"
                    :row="ganttMilestone"
                    :labelWidth="labelWidth"
                    :minDate="listData.startTime"
                    :maxDate="listData.endTime"
                ></base-gantt-box>
              </div>
            </div>
            <el-steps finish-status="finish" align-center :active="activeStep">
              <el-step v-for="(item, idx) in formattedData" :key="idx" :title="(item.year) + '-' + (item.month)">
                <template #icon>
                  <div class="steps-default-box">
                    <div class="steps-default-box-status"></div>
                    <div v-for="(node, index) in getNodesInMonth(item, listData.projectNodeList)"
                      :key="index"
                      :style="{ left: positionNode(node, labelWidth) }"
                      class="steps-default-box-node">
                      <span class="steps-default-box-node-titel">{{ node.nodeName }}</span>
                    </div>
                  </div>
                </template>
              </el-step>
            </el-steps>
          </div>
        </div>
        <div class="info-task-line">
          <el-scrollbar ref="scrollbarRef" height="calc(100vh - 300px)">
            <div 
              class="task-line-box"
              v-for="(taskItem, taskIndex) in listData.taskList"
              :key="taskIndex"
            >
              <div class="task-line-box-title">{{ taskItem.summary }}</div>

              <div class="task-line-box-info">
                <div
                  v-for="(taskChildItem, taskChildIndex) in taskItem.tasks"
                  :key="taskChildIndex"
                  class="box-info-item"
                >
                  <div
                    v-for="(time, index) in formattedData"
                    :key="index"
                    class="box-info-item-model"
                  >
                    <baseGanttBox
                      :time="time"
                      :row="taskChildItem"
                      :labelWidth="labelWidth"
                      :minDate="listData.startTime"
                      :maxDate="listData.endTime"
                    />
                  </div>
                </div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .gantt-box {
    width: 100%;
    height: 100vh;
    
    .box-header {
      display: flex;
      justify-content: center;
      font-size: 32px;
      font-weight: 700;
      padding: 15px 0;
    }

    .box-container {
      margin: 0 20px;
      box-sizing: border-box;
      
      .container-describe {
        display: flex;
        justify-content: end;
        margin-bottom: 15px;
        
        .describe-list {
          display: flex;
          list-style: none;
          
          .describe-item {
            display: flex;
            padding: 0 15px;
            align-items: center;
            gap: 10px;

            .item-icon {
              display: flex;
              width: 20px;
              height: 20px;
              justify-content: center;
              align-items: center;
              border-radius: 2px;
            }

            .item-text {
              font-size: 14px;
              line-height: 1;
            }
            
            .icon-completed {
              background-color: #81ddb6;
            }

            .icon-progress {
              background-color: #7a96fd;
            }

            .icon-started {
              background-color: #bec5c9;
            }

            .icon-extension {
              background-color: #fe7f7e;
            }
          }
        }
      }

      .container-info {
        width: 100%;
        overflow: hidden;
        border: 1px solid #CEDDEC;
        box-sizing: border-box;
        .info-milestone {
          display: flex;

          .milestone-time {
            display: flex;
            position: sticky;
            width: 150px;
            left: 0;
            flex-direction: column;
            flex-shrink: 0;
            background-color: #f9f6f6;
            border: 1px solid #CEDDEC;
            z-index: 2;
            box-sizing: border-box;
            .line-title-time, .line-title-header {
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .line-title-header {
              height: 80px;
              flex-shrink: 0;
              border-bottom: 1px solid #CEDDEC;
              box-sizing: border-box;
            }
            .line-title-time {
              height: 100%;
            }
          }
         
          .milestone-data {
            position: relative;
            left: 0;
            background-color: #FFFFFF;
            z-index: 1;

            .milestone-box {
              display: flex;
            
              .milestone-item {
                position: relative;
                height: 80px;
                width: 200px;
                flex-shrink: 0;
                border-left: 1px solid #ebeef5;
                box-sizing: border-box;
              }
            }

            .steps-default-box {
              display: flex;
              width: 12px;
              height: 12px;
              justify-content: center;
              align-items: center;
              background-color: #FFFFFF;
              border-radius: 50%;

              .steps-default-box-status {
                width: 8px;
                height: 8px;
                background-color: #bbbdbf;
                border-radius: 50%;
              }

              .steps-default-box-node {
                position: absolute;
                width: 10px;
                height: 10px;
                &:after {
                  content: '';
                  display: block;
                  width: 10px;
                  height: 10px;
                  background-color: #2980b9;
                  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
                }

                .steps-default-box-node-titel{
                  position: absolute;
                  width: max-content;
                  bottom: 20px;
                  padding: 2px 10px;
                  background-color: #FAEBE1;
                  color: #E65100;
                  transform: translateX(-50%);
                  transform-origin: center bottom;
                  text-align: center;
                  font-family: "Alibaba PuHuiTi 3.0";
                  font-size: 10px;
                  font-style: normal;
                  font-weight: 500;
                }
              }
            }

            :deep(.el-steps) {
              display: block;
            }

            :deep(.el-step.is-horizontal) {
              width: 200px;
              height: 70px;
              flex-shrink: 0;
              border-left: 1px solid #ebeef5;
              box-sizing: border-box;
            }

            :deep(.el-step__head) {
              display: flex;
              justify-content: center;
              align-items: center;
            }

            :deep(.el-step__head.is-finish) {
              border-color: #FF6505;
              color: #FF6505;
              
              .steps-default-box {
                display: flex;
                width: 12px;
                height: 12px;
                justify-content: center;
                align-items: center;
                background-color: #FFFFFF;
                border-radius: 50%;
                
                .steps-default-box-status {
                  width: 8px;
                  height: 8px;
                  background-color: #FF6505;
                  border-radius: 50%;
                }
              }
            }

            :deep(.el-step__icon.is-icon) {
              width: auto;
              background-color: transparent;
            }

            :deep(.el-step__title) {
              color: #5f7081;
              text-align: center;
              font-size: 14px;
              font-style: normal;
              font-weight: 400;
            }
          }
        }

        .info-task-line {
          .task-line-box {
            display: flex;
            width: fit-content;

            .task-line-box-title {
              display: flex;
              position: sticky;
              width: 150px;
              justify-content: center;
              align-items: center;
              left: 0;
              background-color: #f9f6f6;
              border-bottom: 1px solid #CEDDEC;
              border-right: 1px solid #CEDDEC;
              border-left: 1px solid #CEDDEC;
              flex-shrink: 0;
              z-index: 2;
              box-sizing: border-box;
            }

            .task-line-box-info {
              
              .box-info-item {
                display: flex;
                z-index: 1;
                .box-info-item-model {
                  position: relative;
                  height: 50px;
                  width: 200px;
                  flex-shrink: 0;
                  border-left: 1px solid #ebeef5;
                  box-sizing: border-box;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
